<template>
  <view class="container">
    <view class="form-section">
      <view class="form-text">
        <view class="form-title">公司全称</view>
		<view class="upload-section" @tap="handleUploadLicense">
			<text class="form-tip">当前就职的公司</text>
			<text class="label" >识别营业执照</text>
		</view>
	</view>
	<view class="form-item">
        <input
          class="input"
          placeholder="请输入公司名称"
          maxlength="46"
          v-model="companyName"
        />
        <text class="char-count">{{ companyName.length }}/46</text>	
     </view> 

      
    </view>

    <view class="notes-section">
      <text class="notes-title">注意事项</text>
      <text class="note">1. 请输入您所属的公司营业执照的公司名称</text>
      <text class="note">2. 请注意区分公司的公司</text>
      <text class="note">3. 公司名称将用于后续的企业认证环节，请确保准确性</text>
	  <image src="https://zhimao.shengdunyun.net/uploads/wangeditor/20250308/67cbf2dbc2ea9.png" class="note-img"/>
    </view>

    <button class="'next-button'+(companyName ? 'OK' : 'disabled')" @tap="handleNext" :disabled="!companyName" >下一步</button>
  </view>
</template>

<script>
export default {
	data() {
	  return {
	    companyName: '', // 公司名称
	  };
	},
  methods: {  
	// 处理识别营业执照点击事件
	    handleUploadLicense() {
	      // 弹出底部菜单
	      uni.showActionSheet({
	        itemList: ['拍照片', '从相册中选择', '取消'], // 菜单选项
	        success: (res) => {
	          const index = res.tapIndex; // 用户选择的选项索引
	          if (index === 0) {
	            // 拍照片
	            this.takePhoto();
	          } else if (index === 1) {
	            // 从相册中选择
	            this.chooseImageFromAlbum();
	          }
	          // 如果选择“取消”，什么都不做
	        },
	        fail: (err) => {
	          console.log('用户取消了选择', err);
	        },
	      });
	    },
	
	    // 拍照片
	    takePhoto() {
	      uni.chooseImage({
	        count: 1, // 只能选择一张图片
	        sourceType: ['camera'], // 仅调用相机
	        success: (res) => {
	          const tempFilePath = res.tempFilePaths[0]; // 获取图片临时路径
	          this.uploadImage(tempFilePath); // 上传图片
	        },
	        fail: (err) => {
	          console.log('拍照失败', err);
	        },
	      });
	    },
	
	    // 从相册中选择
	    chooseImageFromAlbum() {
	      uni.chooseImage({
	        count: 1, // 只能选择一张图片
	        sourceType: ['album'], // 仅从相册选择
	        success: (res) => {
	          const tempFilePath = res.tempFilePaths[0]; // 获取图片临时路径
	          this.uploadImage(tempFilePath); // 上传图片
	        },
	        fail: (err) => {
	          console.log('选择图片失败', err);
	        },
	      });
	    },
	
	    // 上传图片
	    uploadImage(filePath) {
	      uni.showLoading({
	        title: '上传中...',
	      });
	
	      // 这里可以调用后端接口上传图片
	      // 例如：
	      uni.uploadFile({
	        url: 'https://your-api-endpoint/upload', // 上传接口地址
	        filePath: filePath,
	        name: 'file', // 文件对应的 key
	        success: (res) => {
	          uni.hideLoading();
	          console.log('上传成功', res);
	          uni.showToast({
	            title: '上传成功',
	            icon: 'success',
	          });
	        },
	        fail: (err) => {
	          uni.hideLoading();
	          console.log('上传失败', err);
	          uni.showToast({
	            title: '上传失败',
	            icon: 'none',
	          });
	        },
	      });
	    },

    // 处理下一步
    handleNext() {
      if (!this.companyName) {
        uni.showToast({
          title: '请输入公司名称',
          icon: 'none',
        });
        return;
      }
      uni.showToast({
        title: '下一步',
        icon: 'none',
      });
      //这里可以添加跳转到下一步页面的逻辑
      uni.navigateTo({
        url: '/pages/form/company-info/index',
      });
    },
  },
};
</script>

<style>
.container {
	height: 750px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: #ffffff;
}

.form-section {
	display: flex;
	flex-direction: column;
  margin-bottom: 20px;
  border-bottom: 1px solid #EBEBEB;
}

.form-text{
	margin-bottom: 20px; /* 行与行之间的间距 */
}

.form-item{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.upload-section{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.form-tip {
  color: #666;
  font-family: "PingFang SC";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.upload-section {
  margin-top: 20px;
}

.label {
    cursor: pointer;
	color: #2F318B;
	font-family: "PingFang SC";
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	
}

.input {
  width: 100%;
  height: 40px;
  border-radius: 5px;
  font-size: 14px;
}

.char-count {
  font-size: 12px;
  color: #666666;
  text-align: right;
  margin-top: 5px;
}

.notes-section {
  margin-bottom: 20px;
}

.notes-title {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 10px;
}

.note {
  font-size: 12px;
  color: #666666;
  margin-bottom: 5px;
  display: block;
}

.note-img{
	width: 125px;
	height: 86px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.next-button {
  width: 100%;
  height: 40px;
  background: linear-gradient(90deg, #9A9AFF 0%, #D6D6FE 100%);
  color: #ffffff;
  border-radius: 32px;
	font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.next-button::after{
  border: none;
}
/* 修改默认背景色 wx-button[disabled]:not([type])*/
.next-button[disabled],wx-button[disabled]:not([type]) {
	background: #ddd;
	color: #666;
}
</style>